<template>
	<view class="expert">
		<!-- 搜索框 -->
		<view class="searchBox">
			<el-input placeholder="请搜索感兴趣的人或内容" prefix-icon='el-icon-search'
				@focus="router1('/pages/questions/searchPage')" />
			<el-button round @click="router1('/pages/questions/searchPage')">搜索</el-button>
		</view>
		<!-- 图标 -->
		<view class="iconBox">
			<view @click="router1('/pages/questions/pregnancyYundong?title=孕期运动')">
				<image src="./image/孕期运动.png" mode="widthFix"></image>
				<text>孕期运动</text>
			</view>
			<view @click="router1('/pages/questions/pregnancyYundong?title=产后恢复')">
				<image src="./image/产后恢复.png" mode="widthFix"></image>
				<text>产后恢复</text>
			</view>
			<view @click="router1('/pages/questions/pregnancyYundong?title=医疗健康')">
				<image src="./image/医疗健康.png" mode="widthFix"></image>
				<text>医疗健康</text>
			</view>
		</view>
		<!-- 分类页 -->
		<view class="textBox">
			<text @click="router1('/pages/questions/allExperts?title=育儿')">育儿</text>
			<text @click="router1('/pages/questions/allExperts?title=教育')">教育</text>
			<text @click="router1('/pages/questions/allExperts?title=情感')">情感</text>
			<text @click="router1('/pages/questions/allExperts?title=全部')">全部</text>
		</view>
		<!-- 热推头部 -->
		<view class="hotpush">
			<image src="./image/retui.png" mode="heightFix"></image>
		</view>
		<!-- 名人 -->
		<view class="item" v-for="item in mingrenData" :key="item.id">
			<image :src="item.doctorHeadImg" mode="heightFix"></image>
			<view class="conBox">
				<text>{{item.doctorName}}</text>
				<text>{{item.doctorDepartment}}</text>
				<text>{{item.doctorAnswer}}回答&nbsp;&nbsp;&nbsp;{{item.doctorShowting}}人收听</text>
			</view>
			<image src="./image/mingpianRight.png" mode="heightFix" @click="router(item.id)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mingrenData: []
			};
		},
		methods: {
			router(id) {
				uni.navigateTo({
					url: `/pages/questions/detail?id=${id}`
				})
			},
			router1(path) {
				uni.navigateTo({
					url: path
				})
			}
		},
		created() {
			this.$api.getMjtDoctor().then(res => {
				// console.log(res)
				if (res.code == 200) {
					this.mingrenData = res.data.sort((a, b) => {
						return b.doctorShowting - a.doctorShowting
					}).slice(0, 3)
				}
			})
		}
	}
</script>

<style lang="less">
	.expert {
		width: 100vw;
		height: calc(100vh - 88upx);
		margin: 0;
		padding: 0;
		background-color: rgb(250, 250, 250);

		.searchBox {
			height: 8vh;
			background: rgb(240, 240, 240);
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.el-input ::v-deep {
				width: 70%;
			}

			.el-button ::v-deep {
				border-radius: 20upx;
			}

			::v-deep .el-input__inner {
				border-radius: 14upx;
			}
		}

		.iconBox {
			height: 20vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2upx 10upx 4upx rgba(0, 0, 0, 10%);

			view {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 50%;
				}

				text {
					margin-top: 10upx;
				}
			}
		}

		.textBox {
			padding: 20upx 0;
			color: rgb(143, 195, 31);
			margin: 30upx 0;
			box-shadow: 0 0 10upx 6upx rgba(0, 0, 0, 10%);
			display: flex;
			justify-content: space-evenly;
		}

		.hotpush {
			height: 5vh;
			padding: 6upx 0;
			background-color: white;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0px -6upx 10upx -4upx rgba(0, 0, 0, 10%);

			image {
				height: 50%;
			}
		}

		.item {
			width: 90%;
			height: 15vh;
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-bottom: 2upx solid rgba(203, 203, 203, 0.5);

			image:first-child {
				height: 80%;
			}

			image:last-child {
				height: 25%;
			}

			.conBox {
				flex: 1;
				height: 100%;
				font-size: 26upx;
				box-sizing: border-box;
				padding: 0 3%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				text:nth-child(1) {
					font-size: 36upx;
				}

				text:nth-child(2) {
					color: rgba(0, 0, 0, 0.7);
				}

				text:nth-child(3) {
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
</style>
